<template>
  <div class="secondPage flexBox1" :style="{'background-color': homeTemplateJson.bgColor, backgroundImage: 'url(' + homeTemplateJson.bgImg + ')',}">
    <div class="nav">
      <yj-mob-icon @click="goBackPrev" size="18" name="arrow-left" />
      <div class="nav-title">{{ title }}</div>
    </div>
    <component
      :is="components[item.component]"
      :datas="item"
      v-for="(item, index) in channelList"
      :key="index"
      :ref="item.component"
    />
  </div>
</template>
<script>
import { Icon } from 'yj-mob-ui';
import { Base64 } from 'js-base64';
import { getParameter } from '../../common/comfun';
import { getPart } from '@/api/getContentApi';
import { components, components1 } from '../../common/setting';
import { baseServices } from '@/api';
export default {
  components: {
    [Icon.name]: Icon,
    ...components
  },
  data () {
    return {
      title: '',
      channelList: [],
      components: components1,
      homeTemplateJson: {},
      ids: ''
    };
  },
  async created () {
    const queryObj = this.$route.query;
    this.title = queryObj.title;
    const templateUrl = queryObj.templateUrl ? Base64.decode(queryObj.templateUrl) : '';
    if (templateUrl.indexOf('.json') !== -1) {
      const url = getParameter(templateUrl, 'alias'),
        templateType = localStorage.getItem('templateType'),
        channelRes1 = await getPart(this.filterPath('alias', url), templateType);
        this.homeTemplateJson = JSON.parse(channelRes1.templateJson);
      if (channelRes1) {
        this.channelList = JSON.parse(channelRes1.component);
        let newArrids = [];
        this.channelList.forEach(item => {
          if (item.setStyle.imageList !== undefined) {
            item.setStyle.imageList.map(ite => {
              newArrids.push(ite.id);
            });
          }
        });
        newArrids = newArrids.filter(item => item !== undefined);
        this.ids = newArrids.toString();
      }
    }
    await this.getTemVips();
  },
  methods: {
    filterPath (name, type) {
      const mainList = JSON.parse(localStorage.getItem('mainList')),
        fiterPath = mainList.filter((item) => item[name] === type);
      return fiterPath.length > 0 ? fiterPath[fiterPath.length - 1].jsonPath : '';
    },
     // 获取VIP数据
     async getTemVips () {
      let vipsArr = [];
      const params = { ids: this.ids }, res = await baseServices.getTemVips(params);
      if (res.code === '200') {
        vipsArr = res.data;
        localStorage.setItem('vipsArr', JSON.stringify(vipsArr));
      }
    },
    goBackPrev () {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.flexBox1 {
  display: flex;
  flex-direction: column;
  // background: #F6F7FB;
}
.nav {
  width: 100%;
  position: relative;
  padding: 20px 0;
  display: flex;
  flex-shrink: 0;
  background: #29C07B;
    margin-bottom: 20px;
  i {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 17px;
    top: 22px;
    color: #FFFFFF;
  }
  .nav-title {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC, sans-serif;
    font-weight: 500;
    color: #FFFFFF;
  }
}
</style>
